<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<link rel="stylesheet" href="../CSS/base/jquery.ui.all.css">
	<script src="../Scripts/jquery-1.7.2.min.js"></script>
	<script src="../Scripts/ui/jquery.ui.core.js"></script>
	<script src="../Scripts/ui/jquery.ui.widget.js"></script>
	<script src="../Scripts/ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../CSS/demos.css">
	<script>

		
	$(function() {
		
		var $tabs=$("#tabs").tabs({
	   
		});
		$tabs.tabs('select', 1); 
		
		//window.parent.document.frames["star"].star();
		$("#tabs").bind('tabsselect', function(event, ui) {
		//alert("haha");
		var index=ui.index;
		if(index==1)
		{
			document.frames["star"].star();
		}
		else if(index==2)
		{
			document.frames["trace"].trace();
		}
		else
		{
			document.frames["collection"].collect();
		}
		});
		
		
	});
	
	</script>
</head>
<body>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Collection</a></li>
		<li><a href="#tabs-2">Comment</a></li>
		<li><a href="#tabs-3">User see</a></li>
	</ul>
	<div id="tabs-1">	
		<iframe src="chart_collection.html" name="collection" scrolling="No" noresize="noresize" id="collection"  width="100%;" height="295px"   frameborder="no" border="0" allowTransparency="true"/></iframe>
	</div>
	<div id="tabs-2">
		<iframe src="chart_star.html" name="star" scrolling="No" noresize="noresize" id="star"  width="100%" height="295px"  frameborder="no" border="0" allowTransparency="true"/></iframe>
	</div>
	<div id="tabs-3">
		<iframe src="chart_trace.html" name="trace" scrolling="No" noresize="noresize" id="trace"  width="100%" height="295px"  frameborder="no" border="0" allowTransparency="true"/></iframe>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">

</div><!-- End demo-description -->

</body>
</html>
